<template>
  <view v-if="src.length > 0">
    <view>
      <view class="page-section swiper">
        <view class="page-section-spacing">
          <swiper
            class="swiper"
            :indicator-dots="indicatorDots"
            :autoplay="autoplay"
            :interval="interval"
            :duration="duration"
          >
            <swiper-item v-for="(i, index) in src" :key="index">
              <view class="swiper-item"><img :src="i" alt="" /></view>
            </swiper-item>
          </swiper>
        </view>
      </view>
    </view>
    <view class="uni-padding-wrap uni-common-mt">
      <view class="uni-flex uni-row">
        <view class="service" @tap="topay()">
          <view class="circle blue"
            ><view class="iconfont icon-peizhitubiaosvg-1"></view
          ></view>
          线上缴费
        </view>
        <view class="service" @tap="torepair()">
          <view class="circle green"
            ><view class="iconfont icon-baoshibaoxiu"></view
          ></view>
          报事报修
        </view>
        <view class="service" @tap="topassing()">
          <view class="circle yellow"
            ><view class="iconfont icon-peizhitubiaosvg-"></view
          ></view>
          访客通行
        </view>
        <view class="service" @tap="tosuggestion()">
          <view class="circle pink"
            ><view class="iconfont icon-tousujianyi"></view
          ></view>
          投诉建议
        </view>
      </view>
    </view>
    <view class="text-padding-wrap uni-common-mt title">
      <view class="uni-flex uni-row"
        ><view class="help">在线客服（请在正常工作时间咨询）</view></view
      >
    </view>
    <view class="text-padding-wrap uni-flex uni-row" @click="show">
      <view class="uni-flex uni-row">
        <img :src="picture.src" alt="" class="picture" />
        <view
          ><view class="name">{{ picture.name }}</view>
          <view>客服人员</view></view
        >
      </view>
      <view class="iconfont icon-dianhua-copy"> </view>
    </view>
    <view class="text-padding-wrap uni-common-mt">
      <view class="left-flex uni-row">
        <view class="iconfont icon-zixun-copy"></view>
        <view class="first-title">物业资讯</view>
      </view>
    </view>
    <view class="text-padding-wrap uni-common-mt title">
      <view class="uni-flex uni-row"
        ><view>物业资讯与行业动态</view
        ><view class="gray-font" @tap="toNews(news)">查看全部></view></view
      >
    </view>
    <view>
      <view
        class="text-padding-wrap uni-flex uni-row title"
        v-for="i in news"
        :key="i.id"
        @tap="toNewsDetails(i)"
      >
        <view>
          <view>{{ i.title }}</view>
          <view class="beyond-show-ellipsis">{{ i.content }} </view>
          <view class="time"> {{ i.time }}</view>
        </view>
        <view>
          <img class="news-img" :src="i.src" alt="" />
        </view>
      </view>
    </view>
    <view class="font">技术支持：嘎嘎哩</view>
    <view class="box" v-if="dialogShow" @click="close">
      <view id="dialog">
        <view class="phone-padding-wrap">0756-2255056</view>
        <view class="call-padding-wrap" @click="open">呼叫</view>
        <view class="cancel-padding-wrap" @click="cancel">取消</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dialogShow: false,
      picture: {
        src: "https://z3.ax1x.com/2021/06/06/2UTk7V.png",
        name: "satsun",
      },
      src: [
        // "../../static/1.jpeg",
        "../../static/2.jpeg",
        "../../static/3.jpeg",
        "../../static/4.jpeg",
      ],
      news: [
        {
          id: 0,
          title: "严禁高空抛物",
          content: `关于禁止高空抛物的温馨提示
            尊敬的珠都国际广场业主及住户：
            您好！
            为了给小区营造一个舒适、安全、温馨的生活居住环境，同时为了您及他人的安全，敬请各业主住户注意以下几点：
            1.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。
            2.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。
            3.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。
            4.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。
            5.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。
            6.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。
            7.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。
            和谐小区的建设离不开您及您家人的配合与主持！
            感谢您对管理处工作的支持与配合！
            珠海珠都物业管理有限公司`,
          richContent: `<h2>关于禁止高空抛物的温馨提示</h2>
            <p style='font-size:18px;'>尊敬的珠都国际广场业主及住户：</p>
            <p style=font-size:18px;'>您好！</p>
            <p style='font-size:16px;'>为了给小区营造一个舒适、安全、温馨的生活居住环境，同时为了您及他人的安全，敬请各业主住户注意以下几点：</p>
            <p style='font-size:16px;'>1.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。</p>
            <p style='font-size:16px;'>2.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。</p>
            <p style='font-size:16px;'>3.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。</p>
            <p style='font-size:16px;'>4.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。</p>
            <p style='font-size:16px;'>5.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。</p>
            <p style='font-size:16px;'>6.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。</p>
            <p style='font-size:16px;'>7.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。</p>
            <p style='font-size:16px;'>和谐小区的建设离不开您及您家人的配合与主持！</p>
            <p style='font-size:16px;'>感谢您对管理处工作的支持与配合！</p>
            <p style='font-size:18px;text-align:right;'>珠海珠都物业管理有限公司</p>`,
          time: "2020-11-03",
          src: "../../static/1.jpeg",
          type: 1,
        },
        {
          id: 1,
          title: "物业冬季防冻防寒防漏防滑措施与方案",
          content: `关于禁止高空抛物的温馨提示
            尊敬的珠都国际广场业主及住户：
            您好！
            为了给小区营造一个舒适、安全、温馨的生活居住环境，同时为了您及他人的安全，敬请各业主住户注意以下几点：
            1.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。
            2.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。
            3.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。
            4.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。
            5.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。
            6.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。
            7.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。
            和谐小区的建设离不开您及您家人的配合与主持！
            感谢您对管理处工作的支持与配合！
            珠海珠都物业管理有限公司`,
          richContent: `<h2>关于禁止高空抛物的温馨提示</h2>
            <p style='font-size:18px;'>尊敬的珠都国际广场业主及住户：</p>
            <p style=font-size:18px;'>您好！</p>
            <p style='font-size:16px;'>为了给小区营造一个舒适、安全、温馨的生活居住环境，同时为了您及他人的安全，敬请各业主住户注意以下几点：</p>
            <p style='font-size:16px;'>1.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。</p>
            <p style='font-size:16px;'>2.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。</p>
            <p style='font-size:16px;'>3.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。</p>
            <p style='font-size:16px;'>4.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。</p>
            <p style='font-size:16px;'>5.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。</p>
            <p style='font-size:16px;'>6.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。</p>
            <p style='font-size:16px;'>7.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。</p>
            <p style='font-size:16px;'>和谐小区的建设离不开您及您家人的配合与主持！</p>
            <p style='font-size:16px;'>感谢您对管理处工作的支持与配合！</p>
            <p style='font-size:18px;text-align:right;'>珠海珠都物业管理有限公司</p>`,
          time: "2020-10-17",
          src: "../../static/2.jpeg",
          type: 1,
        },
        {
          id: 2,
          title: "物业服务企业风险防范四要点",
          content: `关于禁止高空抛物的温馨提示
            尊敬的珠都国际广场业主及住户：
            您好！
            为了给小区营造一个舒适、安全、温馨的生活居住环境，同时为了您及他人的安全，敬请各业主住户注意以下几点：
            1.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。
            2.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。
            3.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。
            4.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。
            5.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。
            6.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。
            7.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。
            和谐小区的建设离不开您及您家人的配合与主持！
            感谢您对管理处工作的支持与配合！
            珠海珠都物业管理有限公司`,
          richContent: `<h2>关于禁止高空抛物的温馨提示</h2>
            <p style='font-size:18px;'>尊敬的珠都国际广场业主及住户：</p>
            <p style=font-size:18px;'>您好！</p>
            <p style='font-size:16px;'>为了给小区营造一个舒适、安全、温馨的生活居住环境，同时为了您及他人的安全，敬请各业主住户注意以下几点：</p>
            <p style='font-size:16px;'>1.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。</p>
            <p style='font-size:16px;'>2.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。</p>
            <p style='font-size:16px;'>3.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。</p>
            <p style='font-size:16px;'>4.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。</p>
            <p style='font-size:16px;'>5.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。</p>
            <p style='font-size:16px;'>6.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。</p>
            <p style='font-size:16px;'>7.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。</p>
            <p style='font-size:16px;'>和谐小区的建设离不开您及您家人的配合与主持！</p>
            <p style='font-size:16px;'>感谢您对管理处工作的支持与配合！</p>
            <p style='font-size:18px;text-align:right;'>珠海珠都物业管理有限公司</p>`,
          time: "2020-10-17",
          src: "../../static/3.jpeg",
          type: 2,
        },
        {
          id: 3,
          title: "物业管理企业尝试进行多元化转型",
          content: `关于禁止高空抛物的温馨提示
            尊敬的珠都国际广场业主及住户：
            您好！
            为了给小区营造一个舒适、安全、温馨的生活居住环境，同时为了您及他人的安全，敬请各业主住户注意以下几点：
            1.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。
            2.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。
            3.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。
            4.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。
            5.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。
            6.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。
            7.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。
            和谐小区的建设离不开您及您家人的配合与主持！
            感谢您对管理处工作的支持与配合！
            珠海珠都物业管理有限公司`,
          richContent: `<h2>关于禁止高空抛物的温馨提示</h2>
            <p style='font-size:18px;'>尊敬的珠都国际广场业主及住户：</p>
            <p style=font-size:18px;'>您好！</p>
            <p style='font-size:16px;'>为了给小区营造一个舒适、安全、温馨的生活居住环境，同时为了您及他人的安全，敬请各业主住户注意以下几点：</p>
            <p style='font-size:16px;'>1.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。</p>
            <p style='font-size:16px;'>2.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。</p>
            <p style='font-size:16px;'>3.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。</p>
            <p style='font-size:16px;'>4.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。</p>
            <p style='font-size:16px;'>5.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。</p>
            <p style='font-size:16px;'>6.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。</p>
            <p style='font-size:16px;'>7.请各业主注意放置好在阳台的花盆、花铲、拖把等一切可能高空坠下的物品，并定期检查其安全性，切勿留下安全隐患。</p>
            <p style='font-size:16px;'>和谐小区的建设离不开您及您家人的配合与主持！</p>
            <p style='font-size:16px;'>感谢您对管理处工作的支持与配合！</p>
            <p style='font-size:18px;text-align:right;'>珠海珠都物业管理有限公司</p>`,
          time: "2018-11-30",
          src: "../../static/4.jpeg",
          type: 2,
        },
      ],

      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
    };
  },
  methods: {
    show() {
      this.dialogShow = true;
    },
    close() {
      this.dialogShow = false;
    },
    open() {
      uni.showToast({
        title: "呼叫成功",
        duration: 1000,
        width: "20px",
        height: "20px",
      });
    },
    toNewsDetails(leadobj) {
      uni.navigateTo({
        url:
          "./news_details?leadobj=" +
          encodeURIComponent(JSON.stringify(leadobj)),
      });
    },
    toNews(leadobj) {
      uni.navigateTo({
        url: "./news?leadobj=" + encodeURIComponent(JSON.stringify(leadobj)),
      });
    },
    topay() {
      uni.navigateTo({
        url: "./payOnline",
      });
    },
    torepair() {
      uni.navigateTo({
        url: "./repair",
      });
    },
    topassing() {
      uni.navigateTo({
        url: "./passing",
      });
    },
    tosuggestion() {
      uni.navigateTo({
        url: "./suggestion",
      });
    },
  },
};
</script>

<style>
page {
  background-color: #f0f1f3;
}
.uni-padding-wrap {
  background-color: #ffffff;
  /* width:690rpx; */
  padding: 40rpx 60rpx;
}
.uni-common-mt {
  margin-top: 30rpx;
}
.uni-flex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  /* margin-bottom: 10px; */
}
.text-padding-wrap {
  background-color: #ffffff;
  padding: 30rpx;
}
.left-flex {
  display: flex;
  flex-direction: row;
}
.icon-zixun-copy {
  margin-right: 5px;
}
.uni-row {
  flex-direction: row;
}

.title {
  border-bottom: 1px #efefef solid;
}
.gray-font {
  color: #9b9b9b;
}
.circle {
  width: 40px;
  height: 40px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  line-height: 40px;
  text-align: center;
  margin-bottom: 5px;
}
.blue {
  background: #94d0cc;
  /* margin-right: 30px; */
}
.green {
  background: #ffc2b4;
  /* margin-right: 30px; */
}
.yellow {
  background: #8fd9a8;
  /* margin-right: 30px; */
}
.pink {
  background: #a7bbc7;
}
.first-title {
  line-height: 20px;
  font-size: 16px;
  font-weight: bolder;
  color: #4bbda1;
}
.news-img {
  width: 80px;
  height: 60px;
}
.beyond-show-ellipsis {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #979797;
  font-size: 12px;
  margin: 5px 0;
}
.time {
  color: #c8c9c8;
  font-size: 10px;
}
swiper {
  height: 200px;
}
.font {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 12px;
}
.help {
  font-size: 14px;
}
.picture {
  height: 60px;
  width: 60px;
  margin-right: 8px;
}
.name {
  margin-bottom: 5px;
  color: #2f2f2f;
}
.helper {
  color: #a0a0a0;
}
#dialog {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  /* text-align: center; */
  width: 100%;
  position: absolute;
  top: 15;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: white;
}
.box {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
}
.phone-padding-wrap {
  text-align: center;
  padding: 30rpx;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom: 1px #efefef solid;
}
.call-padding-wrap {
  text-align: center;
  padding: 30rpx;
  border-bottom: 5px #efefef solid;
}
.cancel-padding-wrap {
  text-align: center;
  padding: 30rpx;
}
.a {
  background-color: black;
  width: 500px;
  height: 500px;
}
</style>